<template>
    <section>
        <el-row :span="24" style="padding: 18px 2px;">
            <el-button type="primary" icon="el-icon-circle-plus" @click="createClock()" round>添加</el-button>
        </el-row>
        <el-row>
            <el-col style="width: 335px; padding: 10px 5px" v-for="(value, key) in cardData">
                <el-card class="clock-box-card">
                    <div slot="header">
                        <i class="el-icon-close" @click="deleteClock(value['id'])" style="float: right; position: relative; top: -10px; right: -10px"></i>
                        <el-input v-model="value['name']" style="width: 75%"></el-input>
                        <el-switch
                                v-model="homeSwitch[key]"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                style="margin-left: 12px;"
                                @change="changeSwitch(value['id'],key)"
                        >
                        </el-switch>
                    </div>
                    <div style="overflow: hidden; padding: 8px 0px" >
                        <span style="line-height: 38px; margin-left: 2px">灯光</span>
                        <el-slider v-model="value['value']" style="width: 79%; float:right; margin-right: 15px"></el-slider>
                    </div>
                    <div style="padding: 8px 0px">
                        <span style="line-height: 38px; margin-left: 2px">设备</span>
                        <el-select
                                v-model="deviceLists[key]"
                                multiple
                                collapse-tags
                                style="width: 79%; float:right; margin-right: 15px"
                                placeholder="请选择"
                                id="device_select"
                        >
                            <el-option
                                    v-for="item in devices"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <br/>
                        <br/>
                    </div>
                    <div>
                        <span style="line-height: 38px; margin-left: 2px">时效</span>
                        <el-time-select
                                placeholder="时间"
                                v-model="value['time']"
                                :picker-options="{
                                start: '00:00',
                                step: '00:05',
                                end: '10:00'
                            }"
                                style="width: 79%; float:right; margin-right: 15px">
                        </el-time-select>
                    </div>
                    <div style="padding: 25px 0px">
                        <el-button type="primary" icon="el-icon-edit" style="float:right; margin-right: 15px; width: 95%"
                                   @click="updateClock(value, key)">确认</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </section>
</template>

<style>
    .clock-box-card {
        width: 320px;
        height: 350px;
    }
</style>

<script>

    import Vue from 'vue';
    import {getClocks, createClock, deleteClock, updateClock, clockSwitch} from '../../api/api';

    export default {
        data() {
            return {
                cardNum: 0,
                cardData: {},
                deviceLists: [],
                homeSwitch: [],
                time: '',
                startClock: [],
                value: 0,
                clockSwitch: {
                    'id' : 0,
                    'status' : 0
                },
                form: {
                    'id' : 0,
                    'name' : '',
                    'value' : 0,
                    'status' : 0,
                    'time' : '00:00',
                },
                devices: [],
            };
        },
        methods: {
            init() {
                getClocks().then((res) => {
                    this.cardData = res.data.data;
                    this.devices = res.data.info;
                    this.cardData.map((_, index) => {
                        this.homeSwitch[index] = _['status'] == 1 ? true:false;
                        this.deviceLists[index] = (_['deviceLists'].length  == 0) ? [] : _['deviceLists'].map(_=>parseInt(_));
                    });

                });
            },
            createClock() {
                createClock().then((res) => {
                    if (res.data.code == "OK") {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                    this.init();
                });
            },
            deleteClock(id) {
                this.$confirm('确定要删除吗？', '提示', {}).then(() => {
                    deleteClock(id).then((res) => {
                        if (res.data.code == "OK") {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                        this.init();
                    });
                });
            },
            updateClock(data, key) {
                data.deviceLists = this.deviceLists[key];
                updateClock(data).then((res) => {
                    if (res.data.code == "OK") {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                    this.init();
                });
            },
            changeSwitch(id, key) {
                this.clockSwitch.id = id;
                this.clockSwitch.status = !this.cardData[key]['status'];
                clockSwitch(this.clockSwitch).then((res) => {
                    if (res.data.code == "OK") {
                        this.cardData[key]['status'] = !this.cardData[key]['status'];
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                    this.init();
                });
            }
        },
        mounted() {
            this.init();
        }
    }
</script>
